<template>
    <div style="padding: 20px;">
        <i-form style="width: 300px;">
            <i-form-item>
                <i-input placeholder="请输入用户名" v-model="model.username"/>
            </i-form-item>
            <i-form-item>
                <i-input type="password" placeholder="请输入密码" v-model="model.password"/>
            </i-form-item>
            <i-form-item>
                <i-button @click="login">登录</i-button>
            </i-form-item>
        </i-form>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Input, Button, Form, FormItem, Notice } from 'view-design';

@Component({
    components: {
        IInput: Input,
        IButton: Button,
        IForm: Form,
        IFormItem: FormItem,
    },
})
export default class Login extends Vue {
    model = {
        username: '',
        password: '',
    };

    login() {
        if (this.model.username === 'admin'
            && this.model.password === 'Admin123') {
            localStorage.setItem('login-time', Date.now() + '');
            this.$router.push({
                name: 'home',
            });
        } else {
            this.$Message.error({
                content: '用户名密码错误!',
            });
        }
    }
}
</script>

<style lang="scss" scoped>

</style>